<!doctype html>
<html lang="en">
<head>
    <title>品牌类型型号</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">

    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑", 'Microsoft YaHei';
        }

        /*导入Excel*/

        .webuploader-pick {
            padding: 3px 0;
            padding-left: 15px;
            background: none;
        }


        body {
            background: #fff;
        }

        html {
            font-size: 62.5%;
        }

        .content {
            width: 100%;
            position: relative;
            top: 0;
            /*padding-bottom: 100px;*/
        }

        .table-detail {
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            display: table;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #cbcbcd;
        }

        table th {
            background: #f8f8f8;
            padding: 5px;
        }

        table td {
            text-align: center;
            padding: 5px;
        }

        .table-bordered {
            border: 1px solid #cbcbcd;
        }

        table td select {
            width: 100%;
            border: none;
            outline: none;
        }

        table td input {
            width: 100%;
            border: none;
            outline: none;
            text-align: center;
        }

        .searchBox {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 25px;
            padding: 0 5px;
        }


    </style>
</head>
<body>
<section class="content" id="app" v-cloak>
    <div class="row">
        <div class="col-md-2">
            <div class="box-body no-padding box-border iframeH2" style="overflow: hidden;background: #f7f8fa;"
                 id="scrollDiv">
                <ul class="ztree" id="ulBrandName"></ul>
                <ul class="ztree" id="ulDeviceTypeName"></ul>
            </div>
        </div>
        <div class="col-md-10">
            <div class="box-body no-padding iframeH2" style="overflow: auto;">
                <div class="pull-left" style="width:120px;">
                    <input type="text" class="form-control input-sm search-text" @keypress id="search"
                           placeholder="请输入型号">
                </div>
                <button type="button" class="btn oaBtn btn-sm pull-left search-button" @keyup.enter="search"
                        @click="search" style="margin-left: 10px;">
                    查询
                    </input>
                    <button type="button" class="btn oaBtn btn-sm" style="margin-right: 5px;float: right;"
                            @click="add"/>
                    新增型号
                </button>

                <div id="divUpload4" class="fj" style="float: left;margin-top: -3px;margin-right: 3px;">
                    <input type="button" class="btn oaBtn btn-sm" value="导入型号"/>
                </div>

                <button type="button" class="btn oaBtn btn-sm" style="float: right;margin-right: 5px;"
                        @click="addbank"/>
                品牌收款行管理
                </button>
                <button type="button" class="btn oaBtn btn-sm" style="margin-right: 5px;float: right;"
                        @click="gotoDetailContact('edit')"/>
                品牌提货地址管理
                </button>
                <button type="button" class="btn oaBtn btn-sm" style="margin-right: 5px;float: right;"
                        @click="addCompany()"/>
                品牌公司管理
                </button>
                <button type="button" class="btn oaBtn btn-sm" style="margin-right: 5px;float: right;"
                        @click="companyManagement()"/>
                公司管理
                </button>
                <div class="clearfix"></div>
                <table class="table table-hover text-center table-striped" style="margin-top: 10px;">
                    <thead>
                    <tr>
                        <th style="width: 80px;" class="tableTitle">品牌</th>
                        <th style="width: 100px;" class="tableTitle">设备类型</th>
                        <th style="width: 120px;" class="tableTitle">型号</th>
                        <th style="width: 80px;" class="tableTitle">限价(元)</th>
                        <th style="width: 80px;" class="tableTitle">吨位(吨)</th>
                        <th class="tableTitle">备注</th>
                        <th style="width: 120px;" class="tableTitle">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,i) in list">
                        <td>{{item.brandName}}</td>
                        <td>{{item.deviceTypeName}}</td>
                        <td>{{item.modelName}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.tonConfig}}</td>
                        <td>{{item.remark}}</td>
                        <td>
                            <a href="javascript:void(0);" @click="gotoDetail(item.id,'browser',0)">&nbsp;修改&nbsp;</a>
                            <a href="javascript:void(0);" @click="removeById(item.id,i)">&nbsp;删除&nbsp;</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <div class="oa-pager text-center" style="margin-top: 5px;">
        共
        <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
        <span class="oa-pager-button" id="first">首页</span>
        <span class="oa-pager-button" id="prev">上一页</span>
        <span class="oa-pager-button" id="next">下一页</span>
        <span class="oa-pager-button" id="last">尾页</span>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=602456c3"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=42e28def"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/easyui/plugins/jquery.menu.js"></script>
<script type="text/javascript" src="/dist/plugins/easyui/plugins/jquery.parser.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<!--导入Excel-->
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
    var zTreeName = null;
    var zTreeBrand;
    var zTreeType;
    var zTreeBrand_callback = {
        setRemoveBtn: function (treeId, treeNode) {
            return !treeNode.isParent
        },
        setRenameBtn: function (treeId, treeNode) {
            return !treeNode.isParent
        },
        addHoverDom: function (treeId, treeNode) {
            if (treeNode.type != "root") return;
            var sObj = $("#" + treeNode.tId + "_span");//获取节点信息
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>";//定义添加按钮
            sObj.after(addStr);//加载添加按钮
            var btn = $("#addBtn_" + treeNode.tId);
            //绑定添加事件，并定义添加操作
            if (btn) btn.bind("click", function () {
                //将新节点添加到数据库中
                $.wyui.postMethod('/deviceBrand/add.json', {
                    id: '',
                    brandName: '新建',
                }, function (data) {
                    var newNode = zTreeBrand.addNodes(treeNode, {
                        id: data.id,
                        name: '新建',
                        pId: treeNode.id,
                        type: 'name'
                    }, true);
                    zTreeBrand.editName(newNode[0]);
                });
                return false;
            });
        },
        removeHoverDom: function (treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        },
        onClick: function (event, treeId, treeNode) {
            $.wyui.postMethod('/device/getDevicePage.json', {brandName: treeNode.name}, function (r) {
                $.wyui.page.queryParams.requestPage = 1;
                $.wyui.page.queryParams.brandName = treeNode.name;
                $.wyui.page.getByPage();
            });
        },
        beforeEditName: function (treeId, treeNode) {
            zTreeBrand.editName(treeNode);
            return false;
        },
        beforeRemove: function (treeId, treeNode) {
            if (confirm("确认删除吗？")) {
                treeNode.id;
                var zTreeName = $.fn.zTree.getZTreeObj("ulBrandName");
                $.wyui.postMethod('/deviceBrand/delById.json', treeNode, function (data) {
                    console.log(treeNode);
                    zTreeBrand.updateNode(treeNode, true);
                    zTreeBrand.cancelSelectedNode(treeNode);
                    window.location.reload();
                });
            }
            return false;
        },
        //修改节点信息
        beforeRename: function (treeId, treeNode, newName, isCancel) {
            if (newName.length == 0) {
                setTimeout(function () {
                    zTreeName.cancelEditName();
                    alert("节点名称不能为空");
                }, 0);
            } else {
                treeNode.brandName = newName;
                $.wyui.postMethod('/deviceBrand/update.json', treeNode, function () {
                    zTreeBrand.cancelEditName(newName);
                    zTreeBrand.cancelSelectedNode(treeNode);
                });
            }
            return false;
        },
    }
    var zTreeType_callback = {
        addHoverDom: function (treeId, treeNode) {
            if (treeNode.type != "root") return;
            var sObj = $("#" + treeNode.tId + "_span");//获取节点信息
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>";//定义添加按钮
            sObj.after(addStr);//加载添加按钮
            var btn = $("#addBtn_" + treeNode.tId);
            //绑定添加事件，并定义添加操作
            if (btn) btn.bind("click", function () {
                //将新节点添加到数据库中
                $.wyui.postMethod('/deviceType/add.json', {
                    id: '',
                    deviceTypeName: '新建',
                }, function (data) {
                    var newNode = zTreeType.addNodes(treeNode, {
                        id: data.id,
                        name: '新建',
                        pId: treeNode.id,
                        type: 'name'
                    }, true);
                    zTreeType.editName(newNode[0]);
                });
                return false;
            });
        },
        removeHoverDom: function (treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        },
        onClick: function (event, treeId, treeNode) {
            $.wyui.postMethod('/device/getDevicePage.json', {deviceTypeName: treeNode.name}, function (r) {
                $.wyui.page.queryParams.requestPage = 1;
                $.wyui.page.queryParams.deviceTypeName = treeNode.name;
                $.wyui.page.getByPage();

            });
        },
        beforeEditName: function (treeId, treeNode) {
            zTreeType.editName(treeNode);
            return false;
        },
        beforeRemove: function (treeId, treeNode) {
            if (confirm("确认删除吗？")) {
                treeNode.id;
                var zTreeName = $.fn.zTree.getZTreeObj("ulDeviceTypeName");
                $.wyui.postMethod('/deviceType/delById.json', treeNode, function (data) {
                    console.log(treeNode);
                    zTreeType.updateNode(treeNode, true);
                    zTreeType.cancelSelectedNode(treeNode);
                    window.location.reload();
                });
            }
            return false;
        },
        //修改节点信息
        beforeRename: function (treeId, treeNode, newName, isCancel) {
            if (newName.length == 0) {
                setTimeout(function () {
                    zTreeName.cancelEditName();
                    alert("节点名称不能为空");
                }, 0);
            } else {
                treeNode.deviceTypeName = newName;
                $.wyui.postMethod('/deviceType/update.json', treeNode, function () {
                    zTreeType.cancelEditName(newName);
                    zTreeType.cancelSelectedNode(treeNode);
                });
            }
            return false;
        },
    }
</script>
<script type="text/javascript">
    var zTreeBrandSetting = {
        view: {
            showIcon: function (treeId, treeNode) {
                return treeNode.isParent;
            },
            addHoverDom: zTreeBrand_callback.addHoverDom,
            removeHoverDom: zTreeBrand_callback.removeHoverDom,
        },
        data: {
            simpleData: {
                enable: true,
            },
            keep: {
                parent: true,
            }
        },
        edit: {
            drag: {
                autoExpandTrigger: true
            },
            enable: true,
            editNameSelectAll: true,
            removeTitle: '删除',
            renameTitle: '修改',
        },
        callback: {
            beforeEditName: zTreeBrand_callback.beforeEditName,
            beforeRemove: zTreeBrand_callback.beforeRemove,
            onClick: zTreeBrand_callback.onClick,
            beforeRename: zTreeBrand_callback.beforeRename,
            onRemove: zTreeBrand_callback.onRemove,
            onRename: zTreeBrand_callback.onRename,
            showRemoveBtn: zTreeBrand_callback.setRemoveBtn,
            showRenameBtn: zTreeBrand_callback.setRenameBtn,
        }
    };
    var zTreeTypeSetting = {
        view: {
            showIcon: function (treeId, treeNode) {
                return treeNode.isParent;
            },
            addHoverDom: zTreeType_callback.addHoverDom,
            removeHoverDom: zTreeType_callback.removeHoverDom,
        },
        data: {
            simpleData: {
                enable: true,
            },
            keep: {
                parent: true,
            }
        },
        edit: {
            drag: {
                autoExpandTrigger: true
            },
            enable: true,
            editNameSelectAll: true,
            removeTitle: '删除',
            renameTitle: '修改',
        },
        callback: {
            beforeEditName: zTreeType_callback.beforeEditName,
            beforeRemove: zTreeType_callback.beforeRemove,
            onClick: zTreeType_callback.onClick,
            beforeRename: zTreeType_callback.beforeRename,
            onRemove: zTreeType_callback.onRemove,
            onRename: zTreeType_callback.onRename
        }
    };
</script>

<script type="text/javascript">
    function refresh() {
        $.wyui.page.getByPage();
    }

    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            searchParams: {
                deviceTypeName: '',
                brandName: ''
            },
        },
        methods: {
            gotoDetail: function (id, pageType, isAdd) {
                top.$.dialog({
                    content: 'url:/page/device/manage/detail.html?type=edit&&id=' + id,
                    title: '修改设备信息',
                    width: 904,
                    height: 465,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            gotoDetailContact: function (pageType) {
                var title = "品牌联系人管理";
                top.$.dialog({
                    content: 'url:/page/device/brandContact.html?pageType=' + pageType,
                    title: title,
                    width: 904,
                    height: 435,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            addCompany: function () {
                top.addTabs({
                    id: 'ppgsgl',
                    title: '品牌公司管理',
                    close: true,
                    url: 'device/brand/companyBrandList.html'
                });
            },
            companyManagement: function () {
                top.addTabs({
                    id: 'gsgl',
                    title: '公司管理',
                    close: true,
                    url: 'company/list.html'
                });
            },
            importExcel: function () {
                var that = this;
                setTimeout(function () {
                    $(".fj").each(function () {
                        var demo = $(this);
                        var uploader = WebUploader.create({
                            // 选完文件后，是否自动上传。
                            auto: true,
                            // swf文件路径
                            swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                            // 文件接收服务端。
                            server: server.ip + "/importExcel/deviceFile.json",
                            // 选择文件的按钮。可选。
                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                            pick: '#' + demo.attr("id"),
                            duplicate: true,
                            formData: {}
                        });
                        // 文件上传过程中创建进度条实时显示。
                        uploader.on('uploadProgress', function (file, percentage) {
                            var $li = $('#' + file.id),
                                $percent = $li.find('.progress span');
                            // 避免重复创建
                            if (!$percent.length) {
                                $percent = $('<p class="progress"><span></span></p>')
                                    .appendTo($li)
                                    .find('span');
                            }
                            $percent.css('width', percentage * 100 + '%');
                        });
                        uploader.on("uploadStart", function () {
                            $("#progress").show();
                        });
                        uploader.on("uploadComplete", function () {
                            $("#progress").hide();
                        });
                        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                        uploader.on('uploadSuccess', function (file, response) {
                            console.log(file)
                            console.log(JSON.parse(response._raw).e.desc)
                            if (JSON.parse(response._raw).e.desc == 'noTel') {
                                alert("新增失败！");
                            } else {
                                alert("上传成功！");
                            }
                        });

                        // 文件上传失败，显示上传出错。
                        uploader.on('uploadError', function (file) {
                            alert("上传失败！");
                        });
                    });
                }, 10);
            },


            addbank: function () {
                top.$.dialog({
                    content: 'url:/page/device/manage/brandBank.html?type=add',
                    title: '品牌银行管理',
                    width: 859,
                    height: 425,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            add: function () {
                top.$.dialog({
                    content: 'url:/page/device/manage/detail.html?type=add',
                    title: '添加设备',
                    width: 904,
                    height: 465,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            search: function () {
                var that = this;
                that.searchParams.key = $("#search").val();
                $.wyui.page.queryParams.requestPage = 1;
                $.extend($.wyui.page.queryParams, that.searchParams);
                console.log($.wyui.page.queryParams);
                $.wyui.page.getByPage();
            },
            removeById: function (id, i) {
                if (confirm('确认要删除吗？')) {
                    var that = this;
                    $.wyui.postMethod("/deviceModel/delById.json", {id: id}, function (result) {
                        location.reload();
                    });
                }
            },
        },


        mounted:

            function () {
                var that = this;
                that.importExcel();
                $.wyui.postMethod('/deviceBrand/getBrandPage.json', {}, function (r) {
                    console.log(r);
                    zTreeBrand = $.fn.zTree.init($("#ulBrandName"), zTreeBrandSetting, r.records);
                })
                $.wyui.postMethod('/deviceType/getDeviceTypeList.json', {}, function (r) {
                    console.log(r);
                    zTreeType = $.fn.zTree.init($("#ulDeviceTypeName"), zTreeTypeSetting, r.records);
                })

            }


    })
    $.wyui.page.dataUrl = server.ip + "/device/getDevicePage.json"
    $.wyui.page.queryParams.pageType = $.wyui.page.urlParams.pageType;
    $.extend($.wyui.page.queryParams, app.searchParams);
    $.wyui.page.getByPage_callback = function (records) {
        app.list = records;
        document.getElementById("scrollDiv").scrollTop = 0;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };
</script>
<script>
    /************************滚动加载******************************/
    var divscroll = document.getElementById('scrollDiv');

    function divScroll() {
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        console.log(scrollTop + divHeight, wholeHeight)
        if (scrollTop + divHeight >= wholeHeight - 2) {
//            alert('滚动到底部了！');
            if (isLoad) {
                isLoad = false;
                setTimeout($.wyui.page.getByPage("scroll"), 1000);

            }

            //这里写动态加载的逻辑，比如Ajax请求后端返回下一个页面的内容
        }

    }

    divscroll.onscroll = divScroll;
</script>
</body>
</html>